<template>
    <div class="flex-center s-content">
        <div class="container">
            <div class="explain back-fff">
                <div class="h4">Forget Password</div>
                <p class="text">Enter the email address you registered with and we will mail you a link to reset your password.</p>
            </div>
            <div class="forms back-fff">
                <el-form ref="form" :model="form" label-width="160px" class="form">
                    <el-form-item label="Email" prop="ToEmail" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
                        <el-input v-model="form.ToEmail" placeholder="Please input New Email" maxlength="20"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="sava back-fff flex-center">
                <el-button type="primary" @click="Submit" :loading="loading">Submit</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { EamilSendServiceApi } from "@/api/user";
import Regs from "@/utils/Regs.js";
export default {
    data() {
        return {
            form: {},
            loading: false
        };
    },
    methods: {
        Submit() {
            this.$refs.form.validate((valid) => {
                if (!valid) return false;
                if (!Regs.email.test(this.form.ToEmail)) {
                    return this.$message.warning({
                        message: "Please enter the correct email address"
                    });
                }
                this.loading = true;
                let form = { ...this.form };
                EamilSendServiceApi({
                    ToEmail: form.ToEmail,
                    Subject: "找回密码",
                    EmailBody: ""
                })
                    .then(() => {
                        this.loading = false;
                        this.$router.back();
                        this.$message.success({
                            message: "链接已发送到邮箱，请注意查看"
                        });
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            });
        }
    }
};
</script>
<style scoped lang="scss">
.explain {
    padding: 40px;
    text-align: center;
    margin-top: 20px;
    .h4 {
        font-size: 18px;
        font-weight: bold;
    }
    .text {
        color: #666666;
        font-size: 16px;
        margin-top: 20px;
    }
}
.forms {
    padding: 50px 30px;
    border-top: 1px solid #eee;
    .form {
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        ::v-deep .el-form-item__label {
            color: #666666;
            font-size: 14px;
            font-weight: 400;
        }
        ::v-deep .el-select {
            width: 100%;
        }
    }
}
.sava {
    padding: 20px;
    margin-top: 10px;
}
</style>